<template>
  <div class="content">
    <div class="table-content">
      <template>
        <div class="form">
          <el-form style="display: flex;" label-width="100px" :model="form">
            <el-form-item label="驾驶员姓名:">
              <el-input class="input-btn" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="电话:">
              <el-input class="input-btn" placeholder="请输入电话"></el-input>
            </el-form-item>
            <el-form-item label="日期:">
              <el-date-picker v-model="form.time" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-button style="margin-left: 20px; height: 40px;" type="primary">查询</el-button>
          </el-form>
          <el-button type="primary">新增短途驾驶员</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column prop="sort" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="age" label="年龄" width="80">
          </el-table-column>
          <el-table-column prop="type" label="驾照类型" width="120">
          </el-table-column>
          <el-table-column prop="time" label="拿证时间" width="120">
          </el-table-column>
          <el-table-column prop="phone" label="电话号" width="120">
          </el-table-column>
          <el-table-column prop="passport" label="护照" width="120">
          </el-table-column>
          <el-table-column prop="license" label="货运上岗证" width="120">
          </el-table-column>
          <el-table-column prop="idcard" label="身份证" min-width="220">
          </el-table-column>
          <el-table-column prop="introducer" label="介绍人" width="120">
          </el-table-column>
          <el-table-column prop="interviewTime" label="面试日期" width="120">
          </el-table-column>
          <el-table-column prop="mark" label="备注" width="120">
          </el-table-column>
          <el-table-column prop="" label="操作" width="200" fixed="right">
            <template>
              <div style="display: flex;">
                <el-button type="primary">编辑</el-button>
                <el-button type="danger">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: "Dashboard",
  data() {
    return {
      loading: false,
      tableData: [
        {
          sort: "1",
          name: "王小虎",
          age: "18",
          type: "B1",
          time: "2019-09-01",
          phone: "123456789",
          passport: "123456789",
          license: "123456789",
          idcard: "123456789",
          introducer: "王小虎",
          interviewTime: "2019-09-01",
        },
        {
          sort: "1",
          name: "王小虎",
          age: "18",
          type: "B1",
          time: "2019-09-01",
          phone: "123456789",
          passport: "123456789",
          license: "123456789",
          idcard: "123456789",
          introducer: "王小虎",
          interviewTime: "2019-09-01",
        },
        {
          sort: "1",
          name: "王小虎",
          age: "18",
          type: "B1",
          time: "2019-09-01",
          phone: "123456789",
          passport: "123456789",
          license: "123456789",
          idcard: "123456789",
          introducer: "王小虎",
          interviewTime: "2019-09-01",
        },
      ],
      form: {
        time: "",
      }
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.content {
  width: 100%;
  height: 820px;
  background: rgb(255, 255, 255);
  margin-top: 10px;
  margin-right: 10px;
  // 设置边框
  border: 1px solid #ccc;
  position: relative;

}

::v-deep .el-pagination {
  float: right;
  margin-top: 10px;
  margin-bottom: 25px;
}

::v-deep .el-table thead th {
  background-color: #f5f7fa;
  color: #000 !important;
  border: 1px solid #fff;
  font-weight: 700;
  text-align: center;
}

.form {
  padding: 10px;
}

.input-btn {
  width: 200px;
}
</style>
